<template>
	<view class="pb-safe-area">
		<view class="tab p-4">
			<view class="flex-1 bg-white rounded-4">
				<view class="flex">
					<text class="flex-1 py-4 text-center h9" @tap="navClick(item)"
						:class="item.scene == search.action ? 'text-primary font-weight-600' : ''"
						v-for="(item, index) in navList" :key="index" :id="item.scene">{{ item.name }}</text>
				</view>
			</view>
		</view>
		<view class="p-4 flex flex-column grid-gap-4" v-if="list.length > 0 || loading === 'loading'">
			<template v-if="search.action === 'service'">
				<view class="bg-white p-4 rounded-4" v-for="(item, index) in list" :key="index">
					<x-project-item :project="item" @tap="$page.open('/pages/project/details?id=' + item.id)">
						<template #action>
							<button class="btn-danger-light-3 btn-round" size="mini" @tap.stop="collect(item, index)">
								取消关注
							</button>
						</template>
					</x-project-item>
				</view>
			</template>
			<template v-else-if="search.action === 'shop'">
				<view class="bg-white rounded-4 p-4" v-for="(item, index) in list" :key="index">
					<x-shop-item :item="item">
						<template #action>
							<button class="btn-danger-light-3 btn-round" size="mini" @tap.stop="collect(item, index)">
								取消关注
							</button>
						</template>
					</x-shop-item>
				</view>
			</template>
			<x-more :status="loading" @load="getList()"></x-more>
		</view>
		<view class="vh-50 flex flex-center" v-else>
			<x-empty type="log" text="暂无收藏"></x-empty>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, nextTick } from 'vue';
import { $api, $message, $page } from '@/utils';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
const loading = ref('loadmore');
const list = ref([]);
const navList = ref([
	{ name: '服务', scene: 'service' },
	{ name: '门店', scene: 'shop' },
]);
const search = ref({
	page: 1,
	action: 'service',
});
const navClick = (e) => {
	search.value.action = e.scene;
	list.value = [];
	search.value.page = 1;
	loading.value = 'loadmore';
	getList();
}
const getList = () => {
	if (loading.value === 'loading' || loading.value === 'nomore') return;
	loading.value = 'loading';
	$api.Collect.serviceList(search.value).then(data => {
		list.value = [...list.value, ...data.data];
		search.value.page++;
		if (data.current_page >= data.last_page) {
			nextTick(() => {
				loading.value = 'nomore';
			})
		}
	}).catch(() => {
		nextTick(() => {
			loading.value = 'nomore';
		})
	}).finally(() => {
		if (loading.value === 'loading') {
			loading.value = 'loadmore';
		}
	})
}
const collect = (item:any, index:number) => {
	if (search.value.action === 'service') {
		$api.Collect.service(item.id).then((data) => {
			list.value.splice(index, 1);
		}).catch(err => {
			$message.error(err.msg);
		})
	} else if (search.value.action === 'shop') {
		$api.Collect.shop(item.id).then((data) => {
			list.value.splice(index, 1);
		}).catch(err => {
			$message.error(err.msg);
		})
	}
}
onLoad(() => {
	getList();
})
onReachBottom(() => {
	getList();
})
</script>
<style lang="scss" scoped>
.tab {
	position: sticky;
	/* #ifdef H5 */
	top: var(--window-top);
	/* #endif */
	/* #ifndef H5 */
	top: 0;
	/* #endif */
	z-index: 999;
	background-color: $uni-bg-color-grey;

	&-body {
		height: 50px;
		line-height: 50px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		gap: 20px;

		&-item {
			padding: 0 10px;
			word-break: nowrap;
			white-space: nowrap;
		}
	}
}
</style>
